<template>
  <Form ref="formRef" v-slot="{errors}" :validation-schema="schema" autocomplete="off" class="xtx-form">
    <div class="xtx-form-item">
      <div class="input">
        <i class="iconfont icon-user"></i>
        <!-- 注意: 这个Field字段必须加name属性, 为了找到对应的校验规则 -->
        <Field v-model="form.account"
               :class="{error: errors.account}"
               name="account"
               placeholder="请输入用户名"
               type="text"/>
      </div>
      <!-- 错误提示  -->
      <div v-if="errors.account" class="error">{{ errors.account }}</div>
    </div>

    <div class="xtx-form-item">
      <div class="input">
        <i class="iconfont icon-phone"></i>
        <Field v-model="form.mobile"
               :class="{error: errors.mobile}"
               name="mobile"
               placeholder="请输入手机号"
               type="text"/>
      </div>
      <!-- 错误提示 -->
      <div v-if="errors.mobile" class="error">{{ errors.mobile }}</div>
    </div>

    <div class="xtx-form-item">
      <div class="input">
        <i class="iconfont icon-code"></i>
        <Field v-model="form.code"
               :class="{error: errors.code}"
               name="code"
               placeholder="请输入验证码"
               type="text"/>
        <span class="code" @click="sendCode">{{ codeStr }}</span>
      </div>
      <!-- 错误提示 -->
      <div v-if="errors.code" class="error">{{ errors.code }}</div>
    </div>

    <div class="xtx-form-item">
      <div class="input">
        <i class="iconfont icon-lock"></i>
        <Field v-model="form.password"
               :class="{error: errors.password}"
               name="password"
               placeholder="请输入密码"
               type="password"/>
      </div>
      <!-- 错误提示  -->
      <div v-if="errors.password" class="error">{{ errors.password }}</div>
    </div>

    <div class="xtx-form-item">
      <div class="input">
        <i class="iconfont icon-lock"></i>
        <Field v-model="form.rePassword"
               :class="{error: errors.rePassword}"
               name="rePassword"
               placeholder="请确认密码"
               type="password"/>
      </div>
      <!-- 错误提示  -->
      <div v-if="errors.rePassword" class="error">
        {{ errors.rePassword }}
      </div>
    </div>
    <a class="btn" href="javascript:;" @click="submit">立即提交</a>
  </Form>
</template>

<script>
import { Field, Form } from 'vee-validate'
import { reactive, ref } from 'vue'
import veeSchema from '@/utils/vee-validate-schema'
import codeUtil from '@/utils/sendCode'
import API from '@/api/user'
import qqLogin from '@/components/login/qqLogin'
import Message from '@/components/library/Message'

export default {
  name: 'CallbackPatch',
  components: {
    Field,
    Form
  },
  props: {
    unionId: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const formRef = ref(null)

    // 表单数据对象
    const form = reactive({
      account: null,
      mobile: null,
      code: null,
      password: null,
      rePassword: null
    })

    // 1.校验规则对象 多两个校验规则: 用户名是否存在, 再次输入密码是否一致
    const schema = {
      // 校验函数规则: 返回true就是校验成功, 返回一个字符串就是失败, 字符串就是错误提示
      // 用户名是否存在
      account: veeSchema.accountApi,
      mobile: veeSchema.mobile,
      code: veeSchema.code,
      password: veeSchema.password,
      // 再次输入密码是否一致
      rePassword: veeSchema.rePassword
    }

    // 2.发送短信验证码, 重新发送的接口API定义
    const {
      sendCode,
      codeStr
    } = codeUtil(form, formRef, API.userQQPatchCode)

    // 3.立即提交
    const submit = () => {
      const valid = formRef.value.validate()
      if (valid) {
        API.userQQPatchLogin(props.unionId, form.account, form.mobile, form.code, form.password)
          .then((res) => {
            qqLogin(res, 'QQ完善信息成功')
          })
          .catch(err => {
            Message({
              type: 'error',
              text: err.response.data.message
            })
          })
      }
    }

    return {
      formRef,
      form,
      schema,
      sendCode,
      codeStr,
      submit
    }
  }
}
</script>

<style scoped>

</style>
